<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="./css/detail.css">
    <link rel="stylesheet" href="./layui-v2.5.6/layui/css/layui.css">
</head>

<body>
    <div id="head"></div>
    <div class="layui-carousel" id="test1">
        <div carousel-item>
            <div><img src="https://du.hupucdn.com/FkxJuhPYYgKpD47ezne9Bu5I2chU?imageView2/0/format/webp" alt=""></div>
            <div><img src="https://du.hupucdn.com/FnsS_ISXyRv0VX0xnWZXneEDwKKr?imageView2/0/format/webp" alt=""></div>
            <div><img src="https://du.hupucdn.com/Fh4djhxaxftEbiUL0xX-IywUNeVu?imageView2/0/format/webp" alt=""></div>
            <div><img src="https://du.hupucdn.com/FqRY2_6ScfAKs0AXqri7kNeWms5H?imageView2/0/format/webp" alt=""></div>
            <div><img src="https://du.hupucdn.com/FklgWycX9MS8RhxE2ph3SnhcR_iw?imageView2/0/format/webp" alt=""></div>
        </div>
    </div>

    <div class="detail">
        <h2>8H物理防螨天然乳胶床垫M2</h2>
        <p class="detail-c">新用户精选智能产品，领券更优惠>></p>
        <p class="detail-a">小米816感恩季！8月8日限时特惠到手价269！模拟自然风 / 26.6dB超静音 / 14米远距柔和风 / 100档风速调节 / 小爱语音控制</p>
        <p class="detail-b">￥125</p>
        <button class="layui-btn layui-btn-danger"> 加入购物车 </button>
    </div>
    <div class="detail-d">
        <ul>
            <li>商品详情</li>
            <li>评论</li>
            <li>常见问题</li>
        </ul>
    </div>
    <div id="main"> 
            <img src="https://img.youpin.mi-img.com/shopmain/07cc27993c83ef4cbd5d3c10c61aeae0.jpg" alt="">
    </div>

</body>
<script src="./jquery-1.11.3.js"></script>
<script src="./layui-v2.5.6/layui/layui.js"></script>
<script src="./js/detail.js" type="module"></script>

<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '450' //设置容器宽度
            , height: '450px'
            , arrow: 'always' //始终显示箭头
            , anim: 'fade' //切换动画方式
        });
    });
</script>

</html>